<template>
  <div class="admin-list-container">
    <h2 class="page-title">管理员管理</h2>
    <el-card>
      <el-alert
        title="当前仅支持查看已登录管理员信息；更多管理能力（新建/禁用/重置密码）需后端接口支持"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 12px;"
      />

      <div class="toolbar">
        <el-button type="primary" @click="fetchAdmin" :loading="loading">刷新</el-button>
      </div>

      <el-descriptions v-if="adminInfo" :column="2" border title="当前管理员">
        <el-descriptions-item label="管理员ID">{{ adminInfo.adminId }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ adminInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ adminInfo.nickName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="角色">
          <el-tag :type="adminInfo.role === 'super_admin' ? 'danger' : 'success'">
            {{ roleText(adminInfo.role) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="adminInfo.status === 1 ? 'success' : 'info'">
            {{ adminInfo.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDateTime(adminInfo.createdAt) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDateTime(adminInfo.updatedAt) }}</el-descriptions-item>
      </el-descriptions>

      <el-empty v-else description="暂无管理员信息" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { adminAPI } from '@/api'

const loading = ref(false)
const adminInfo = ref(null)

const roleText = (role) => {
  if (role === 'super_admin') return '超级管理员'
  if (role === 'admin') return '普通管理员'
  return role || '-'
}

const formatDateTime = (val) => {
  if (!val) return ''
  try {
    const d = typeof val === 'string' ? new Date(val) : new Date(val.year, val.monthValue - 1, val.dayOfMonth, val.hour, val.minute, val.second)
    const pad = (n) => String(n).padStart(2, '0')
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
  } catch {
    return String(val)
  }
}

const fetchAdmin = async () => {
  loading.value = true
  try {
    const res = await adminAPI.getAdminInfo()
    adminInfo.value = res.data || null
  } catch (e) {
    adminInfo.value = null
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchAdmin()
})
</script>

<style scoped>
.admin-list-container {
  padding: 20px;
}

.page-title {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.toolbar {
  margin-bottom: 12px;
}
</style>

